Component({
  externalClasses: ['flip-class', 'show-class', 'hide-class'],
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  /**
   * 组件的属性列表
   */
  properties: {
    bg: { // 背景
      type: String,
      value: "transparent"
    },
    direction: { //布局方向 row、column
      type: String,
      value: "column"
    },
    layout: { // 布局形式 L,R,T,B,X,Y=左、右、上、下、X轴居中、Y轴居中
      type: String,
      value: "left" //left,right,centerX,centerY,centerXY,bottom
    },
    visible: { // 布局形式
      type: Boolean,
      value: false
    },
    flip: { // 显示触发器
      type: Boolean,
      value: false
    },
    animation: { // 动画效果
      type: String,
      value: "zoomIn zoomOut" //用空格隔开，分别表示显示、隐藏
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    background: "background:rgba(1, 1, 1, 0.3);",
    bgVisible: false,
    boxVisible: false,
    animationShow: "zoomIn",
    animationHide: "zoomOut",
  },
  lifetimes: {
    attached: function () {
      // 在组件实例进入页面节点树时执行
      this.setAnimation(this.data.animation);
    },
    detached: function () {
      // 在组件实例被从页面节点树移除时执行
    },
  },
  observers: {
    //监听配置文件
    'bg': function (value) {
      value = value || null;
      if (value != null) {
        value = value + "";
        if (value.indexOf("http") > -1 || value.indexOf(";base64") > -1) {
          this.setData({
            background: `background-image:url(${value});`
          })
        } else {
          this.setData({
            background: `background:${value};`
          })
        }
      }

    },
    'visible': function (value) {
      let that = this;
      if (value == false || value == "false") {
        that.setData({
          boxVisible: false
        })
        setTimeout(() => {
          that.setData({
            bgVisible: false
          })
        }, 300)
      } else if (value == true || value == "true") {
        that.setData({
          bgVisible: true,
          boxVisible: true
        })
      }
    },
    'animation': function (value) {
      this.setAnimation(value);

    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    show() {
      this.setData({
        visible: true
      })
    },
    hide() {
      this.setData({
        visible: false
      })
    },
    setAnimation(value = "") {
      let list = ["zoomIn", "zoomOut"];
      if (value) {
        list = value.split(" ");
        if (list.length < 2) {
          list.push("");
          list.push("");
        }
      }
      this.setData({
        animationShow: list[0] || "zoomIn",
        animationHide: list[1] || "zoomIn",
      })
    }
  }
})